<template>
  <div class="vehicle-rental">
    <!-- 车辆具体信息 -->
    <div class="rental-top">
      <div class="introduce">
        <div class="brand">{{rentalData.name}}</div>
        <div>{{rentalData.licenseNum}}</div>
        <div class="appearance">{{rentalData.appearance}}</div>
        <div class="seat">{{rentalData.seatsNum}}</div>
        <div class="from-location">{{stateLocation}}</div>
      </div>
      <div class="image">
        <img :src="rentalData.imgSrc" alt="">
      </div>
    </div>
    <!-- 车辆租用的具体价格算法 -->
    <div class="rental-bottom">
      <!-- 分时计费 -->
      <div class="time-share">
        <div>
          <span>分时计费</span>
          <span>{{rentalData.rentalPrice}}元/分钟</span>
        </div>
        <div>
          <span>基础服务费</span>
          <span>2元/小时，每日30元封顶</span>
        </div>
        <div>
          <span>尊享补充保障</span>
          <span>2元/小时，每日30元封顶</span>
        </div>
      </div>
      <!-- 按时计费 -->
      <div
        class="time-package-div"
        ref="timePackage"
        :class="{'bg_color': curIndex === index}"
        v-for="(item,index) in packageList"
        :key="item.id"
        >
        <time-package :content="item.content" :price="item.price" @click.native="isDisabled(item,index,$event)" />
      </div>
    </div>
    <!-- 立即租车 -->
    <div class="rental-now">
      <div ref="rentalBox">
        <button :class="{'rental-now-box': isRentalFlag}" :disabled="!isRentalFlag" @click="getRentalNow">立即租车</button>
      </div>
    </div>

    <hr>

    <div class="rental-now voucher-rental">
      <div ref="rentalBox">
        <button @click="getVoucherList">上传凭证</button>
      </div>
    </div>
    <div class="voucher-dialog">
      <van-uploader v-model="fileList" name="myfiles" multiple max-count="4" />
    </div>
  </div>
</template>
<script>
// import axios from 'axios';
import { mapState } from 'vuex';
import { getCarList, getOrderList, getTimePackageList, handleMultiVoucher, setOrderList, updateCarList, updateSpaceAndCar, updateSpaceData2 } from '../../../api';
import TimePackage from '../../common/TimePackage.vue';
import VehicleMap from './VehicleMap.vue';
import VehicleRentalMap from './VehicleRentalMap.vue';
export default {
  components: { TimePackage, VehicleMap, VehicleRentalMap },
  name: 'vehicleRental',
  props: {
    rentalData: Object
  },
  data() {
    return {
      count: 1,
      name: '大众',
      licenseNum: '粤A1234',
      seatsNum: 2,
      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
      packageList: [ // 默认时间套餐
        {
          content: '3小时计费（不限里程）',
          price: 49
        }
      ],
      location: '请选择还车地点>>',
      curIndex: -1,
      isRentalFlag: false, // 立即租车的选中状态
      isPackageFlag: false, // 套餐的选中状态
      isOverPackageFlag: false, // 结束用车状态
      isPackageData: null, // 套餐的数据
      startTime: null, // 开始租车时间
      overTime: null, // 结束租车时间
      rentalPrice: 0, // 订单价格
      packageId: -1, // 套餐对应的id
      distance: '', // 行程距离
      showVoucher: false, // 凭证弹框状态
      fileList: []
    }
  },
  mounted() {
  },
  computed: {
    ...mapState([
      'stateLocation',
      'stateFlag',
      'stateRentalStatus',
      'stateOrderStatus'
    ])
  },
  methods: {
    // 获取图片列表
    getVoucherList(e) {
      if(this.fileList.length === 0) {
        this.$dialog.alert({
          message: '请点击底下上传凭证'
        })
      }
    },
    // 让上传文件弹框出现
    uploadImgs() {
      this.showVoucher = true;
    },
    init(unitPrice){
      this.curIndex = -1;
      this.isRentalFlag = false;
      this.getTimePackageFun(unitPrice);
    },
    // 给日期格式的个位数前补0
    getZero(num) {
      if(parseInt(num) < 10) {
        num = '0' + num;
      }
      return num;
    },
    // 点击时间套餐和立即租车的事件
    isDisabled(pre, idx, e) {
      if(this.curIndex !== idx) { // 如果点击的时候索引跟下标不对
        this.curIndex = idx; // 则让当前的索引你跟下标相等，这样的话时间套餐就亮了
        this.isPackageData = pre; // 保存当前拿到的时间套餐数据
        this.isRentalFlag = true; // 时间套餐亮的话就让立即租车也亮起来
        this.packageId = pre.id; // 将当前选中的套餐保存下来
      }else { // 当再点击一次之前索引值跟下标相等，也就是亮的时候，让索引值改变，这样就不亮了
        this.curIndex = -1;
        this.isRentalFlag = false; // 时间套餐不亮的时候立即租车也不能亮
      }
    },
    // 立即租车
    getRentalNow() {
      if(this.fileList.length === 0) {
        this.$dialog.alert({
          message: '请上传凭证再租车'
        })
      }else {
        if(confirm('确定要立即租用吗？')) {
          // 系统当前时间
          let date = new Date();
          this.startTime = Date.parse(date)/1000; // 保存一下开始租车的秒数
          // 先查询车辆是否可租，也就是拿到车辆的是否可租状态
          getCarList().then(res => {
            res.data.data.forEach(item => {
              // 拿到车辆id
              if(item.id === parseInt(this.rentalData.id)) {
                // 比较车辆是否可租的状态
                if(item.rentalStatus === "1") {
                  // 查询了车辆是否可租之后还需要查询用户是否已经租了其他的车辆
                  // 说明此时用户可以租车
                  getOrderList(this.$cookie.get('userId'), 0).then(res2 => { // 条件是找到正在进行中的，因为要租车，所以要找租用状态为0的
                    if(res2.data.data.length === 0) { // 没有订单
                      this.$cookie.set('rentalId', item.id);
                      this.$cookie.set('rentalStartTime', this.startTime);

                      // 处理车辆凭证
                      if(this.fileList.length !== 0) {
                        let myFormData = new FormData()
                        this.fileList.forEach(item => {
                          // fileObject.push(item.file.name);
                          myFormData.append('myfiles', item.file.name)
                        })
                        handleMultiVoucher(myFormData).then(({data}) => {
                          let arr = [];
                          arr.push(data);
                          setOrderList({ // 如果车辆可以租则插入数据到订单表中
                            "user_id": this.$cookie.get('userId'),
                            "car_id": item.id,
                            "orderStatus": 0,
                            "startTime": this.startTime,
                            "packageId": this.packageId,
                            "beforeVoucher": `[${arr[0]}]`
                          }).then(res3 => {
                            updateCarList(0, item.id).then(res4 => { // 租车成功后要将车辆租赁的状态改为不可租
                            })
                            // 将该车辆所在的车位id改为null，取消车位被占用情况
                            updateSpaceData2(item.id).then(res4 => {
                            })
                            // 再此租车将车辆id以及车位更新成功
                            updateSpaceAndCar(item.id).then(res4 => {
                            })
                            // 租车成功后跳转到订单页面
                            this.getTimePackageFun(this.rentalData.rentalPrice);
                            this.$router.push({
                              path: '/rental',
                              query: {
                                packageList: this.packageList,
                                curIndex: this.curIndex,
                                rentalData: this.rentalData,
                                startTime: this.startTime
                              }
                            });
                          }).catch(() => {
                            console.log('插入数据失败')
                            return false;
                          })
                        })
                      }

                      // updateCarDistance({ // 租车之后将当前车辆的距离更新进去
                      //   "distance": 0,
                      //   "user_id": this.$cookie.get('userId')
                      // }).then(({data}) => {
                      //   // 更细成功后调用获取位置的方法
                      // })
                    }else {
                      console.log('因为进入了找进行中的订单时数组长度不为0，所以当前有订单');
                    }
                  })
                }else {
                  console.log('该车辆被别人租用了，当前不可租');
                }
              }
            });
          })
        }
      }
    },
    // 拿到还车地点
    getLocation(val) {
      this.location = val[0];
    },
    // 从接口中获取时间套餐
    getTimePackageFun(unitPrice) {
      let that = this;
      getTimePackageList([
        unitPrice
      ]).then(res => {
        that.packageList = res.data.data;
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-rental {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding: 40px 10px;
  box-sizing: border-box;
  // 车辆具体信息
  .rental-top {
    width: 100%;
    height: $height*4;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    display: flex;
    flex-flow: row wrap;
    padding: 10px;
    box-sizing: border-box;
    // 左边
    .introduce {
      width: 70%;
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      div {
        width: 28%;
        height: 16px;
        line-height: 16px;
      }
      // 车的品牌
      .brand {
        width: 100%;
      }
      // 车的颜色
      // 车的位置容量
      .appearance, .seat {
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 4px;
        color: #aaa;
        border: 1px solid #aaa;
        &::after {
          content: '座';
        }
      }
      .appearance {
        margin-right: 4px;
        &::after {
          content: "";
        }
      }
      .from-location {
        width: 94%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &::before {
          content: '取车：';
        }
      }
    }
    // 右边
    .image {
      width: 30%;
      img {
        width: 100%;
        // height: 100%;
      }
    }
    // 还车点
    .location {
      width: 100%;
      height: $height;
      line-height: $height;
      display: flex;
      flex-flow: row nowrap;
      background-color: #eee;
      border-radius: 4px;
      .location-left {
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          color: #666;
        }
      }
      .location-right {
        width: 30%;
        color: $color;
        &::before {
          content: '|';
          color: #666;
          margin-right: 10px;
        }
      }
    }
  }
  // 车辆租用的具体价格算法
  .rental-bottom {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    .time-share {
      width: 100%;
      height: 100px;
      border-radius: 10px;
      background-color: $color;
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
      div {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        &:nth-of-type(1) {
          height: $height;
          span {
            width: 100%;
            font-size: 14px;
            &:nth-of-type(2) {
              font-size: 16px;
              text-align: right;
            }
          }
        }
        &:nth-of-type(2), &:nth-of-type(3) {
          span {
            width: 100%;
          }
        }
      }
    }
    .time-package-div {
      background-color: #fff;
      border-radius: 10px;
    }
  }
  // 立即租车
  .rental-now, .rental-over {
    width: 100%;
    height: $height*1.5;
    div {
      width: 100%;
      height: 100%;
      line-height: $height*1.5;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      margin: 10px auto;
      button {
        width: 100%;
        border: none;
        border-radius: 100px;
        background-color: #ccc;
        // background-color: $color;
        color: #fff;
      }
    }
  }
}
// 弹框
.popup /deep/ {
  width: 100%;
  height: 100%;
  .van-popup__close-icon--top-right {
    font-weight: 700;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
    background-color: $color;
  }
}
// 时间套餐
.bg_color {
  background-color: $color !important;
  color: #fff;
}
// 立即租车
.rental-now-box {
  background-color: $color !important;
}
.voucher-rental {
  button {
    background-color: $color !important;
  }
}
.voucher-dialog {
  margin-top: 10px;
}
hr {
  background-color: #000;
  margin-top: 10px;
  height: 3px;
}
</style>